.animation-background-square{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  background: linear-gradient(125deg,  #49ed55, #4dd3fb, #4861f0, #8844ff, #f8de32);
  background-size: 400% 400%;
  background-position: 50% 50%;
  animation: infinite linear 15s ani-animation-background-square-bg;
}

.animation-background-square::before,
.animation-background-square::after{
  content: '';
  display: inline-block;
  width: 250vw;
  height: 80vh;
  position: absolute;
  filter: blur(10vh);
}

.animation-background-square::before{
  left: 0%;
  top: 0%;
  transform: translate(-50%,-80%);
  border-radius: 0% 50% 50% 0%;
  background: rgba(81, 241, 192, 0.35);
}

.animation-background-square::after{
  right: 0%;
  bottom: 0%;
  transform: translate(50%,80%);
  border-radius: 50% 0% 0% 50%;
  background: rgba(253, 97, 97, 0.35);
}

.animation-background-square,
.animation-background-square > li {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  border: none;
  outline: none;
}

.animation-background-square > li{
  box-shadow: 0px 0px 3px #ffffff88;
  display: block;
  width: 30px;
  height: 30px;
  background: #00ffff;
  position: absolute;
  bottom: 0%;
  opacity: 100%;
  transform: translateY(100%) rotate(0deg);
  animation: infinite linear 8s ani-animation-background-square-child,
  infinite linear 3s ani-animation-background-square-child-light;
}
/**
子元素样式，由js生成
 */

@keyframes ani-animation-background-square-child {
  0%{
    bottom: 0%;
    transform: translateY(100%) rotate(0deg) scale(1);
    opacity: 100%;
    border-radius: 0%;
  }
  100%{
    bottom: 100%;
    transform: translateY(-100%) rotate(720deg) scale(0.35);
    opacity: 5%;
    border-radius: 50%;
  }
}

@keyframes ani-animation-background-square-child-light {
  0%{
    filter: hue-rotate(0deg);
  }
  50%{
    filter: hue-rotate(180deg);
  }
  100%{
    filter: hue-rotate(0deg);
  }
}

@keyframes ani-animation-background-square-bg {
  0%{
    background-position: 50% 50%;
  }
  25%{
    background-position: 10% 25%;
  }
  50%{
    background-position: 50% 50%;
  }
  75%{
    background-position: 75% 90%;
  }
  100%{
    background-position: 50% 50%;
  }
}



